<script setup lang="ts">
import { useFilterPaginationQuery } from '@peng_kai/kit/admin/components/filter/src/useFilterQuery';
import { presetCols, type TColumn } from '~/components/table';
import ExCard from '../ExCard.vue';

const columns: TColumn[] = [
  presetCols.selection.config,
  { key: 'name', name: 'Name' },
  { key: 'time', name: 'Time' },
  { key: 'address', name: 'Address' },
  { key: 'rate', name: 'Rate' },
  { key: 'amount', name: 'Amount' },
  presetCols.expansion.config,
];
const data = [
  { id: 1, name: 'Plinko', time: '下午02:36:54', address: '10.0000 000000 0000 0000 000 0000 000', rate: 'x0.300', amount: '3.00000000' },
  { id: 2, name: 'Plinko', time: '下午02:36:54', address: '10.0000 000000 0000 0000 000 0000 000', rate: 'x0.300', amount: '3.00000000' },
  { id: 3, name: 'Plinko', time: '下午02:36:54', address: '10.0000 000000 0000 0000 000 0000 000', rate: 'x0.300', amount: '3.00000000' },
  { id: 4, name: 'Plinko', time: '下午02:36:54', address: '10.0000 000000 0000 0000 000 0000 000', rate: 'x0.300', amount: '3.00000000' },
  { id: 5, name: 'Plinko', time: '下午02:36:54', address: '10.0000 000000 0000 0000 000 0000 000', rate: 'x0.300', amount: '3.00000000' },
  { id: 6, name: 'Plinko', time: '下午02:36:54', address: '10.0000 000000 0000 0000 000 0000 000', rate: 'x0.300', amount: '3.00000000' },
  { id: 7, name: 'Plinko', time: '下午02:36:54', address: '10.0000 000000 0000 0000 000 0000 000', rate: 'x0.300', amount: '3.00000000' },
  { id: 8, name: 'Plinko', time: '下午02:36:54', address: '10.0000 000000 0000 0000 000 0000 000', rate: 'x0.300', amount: '3.00000000' },
];

const [filterQuery] = useFilterPaginationQuery(apis.apiGameList, {
  type_code: { value: 'originals' },
  page_size: { value: 5 },
});
const gameColumns = computed<TColumn[]>(() => [
  { key: 'ename', name: '名字' },
  { key: 'cover', name: '封面' },
  { key: 'status', name: '状态', class: 'text-center' },
]);
</script>

<template>
  <ExCard title="Table 组件基本用法" class="!bg-sys-layer-a">
    <TTable indexId="id" :columns="columns" :data="data">
      <template #selection-td>
        <!-- eslint-disable-next-line vue/component-name-in-template-casing -->
        <presetCols.selection.Component />
      </template>
      <template #name-td="{ row }">
        {{ row.name }}
      </template>
      <template #address-td="{ row }">
        <span class="line-clamp-1">
          {{ row.address }}
        </span>
      </template>
      <template #expansion="{ row }">
        <pre>{{ JSON.stringify(row, undefined, 4) }}</pre>
      </template>
    </TTable>
  </ExCard>

  <ExCard title="Table 组件数据加载" class="!bg-sys-layer-a">
    <template #action>
      <AButton class="block" size="small" type="primary" @click="filterQuery.refetch()">
        刷新
      </AButton>
    </template>

    <TSuspenseView v-bind="buildSvPropsOfQuery(filterQuery)" errorClass="min-h-40" outRender>
      <TTable indexId="code" :columns="gameColumns" :data="filterQuery.data.value?.list ?? []">
        <template #cover-td="{ row }">
          <TGameCover class="w-14" :src="row.image_cover" />
        </template>
        <template #status-td="{ row }">
          <span>{{ row.status ? '正常' : '异常' }}</span>
        </template>
      </TTable>
      <template #pending>
        <TTableLoading />
      </template>
    </TSuspenseView>
  </ExCard>
</template>

<style lang="scss" scoped>

</style>
